<template>
   
<div class="musicDetailTop">
  <img :src="musicList.al.picUrl" alt="" class="bg-img"/>
<div class="left">
    <svg class="icon bofang" aria-hidden="true" @click="backHome">
            <use xlink:href="#icon-fanhuijiantou"></use>
          </svg>
          <div>
            <p>{{musicList.al.name}}</p>
            <span v-for="item in musicList.ar" :key="item">{{item.name}}</span>
          </div>
</div>
<div class="right">
    <svg class="icon bofang" aria-hidden="true" >
            <use xlink:href="#icon-fenxiang"  ></use>
          </svg>
</div>
</div>
<div class="musicMiddle" v-show="!isLyricShow">
  <img src="@/assets/needle-ab.png" class="bg-needle" :class="{bg_needle_active:!isBtn}">
  <img src="@/assets/cd.png"  class="bg-cd"/>
  <img :src="musicList.al.picUrl" alt="" class="bg-al" :class="isBtn?'.bg_al_active':'.bg_al_pause'" @click="isLyricShow=true"/>
</div>
<div class="lyricContent"   ref="musicLyric" v-show="isLyricShow">
  <p
      v-for="item in lyric"
      :key="item"
      :class="{
        active:
          currentTime * 1000 >= item.time && currentTime * 1000 < item.pre,
      }"
    
    >
      {{ item.lrc }}
    </p>
</div>
   <div class="musicFooter">
    <div class="top">
      <svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-xihuan"></use>
      </svg>
      <svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-pinglun"></use>
      </svg>
       <svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-yinle"></use>
      </svg>
      <svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-xiazai1"></use>
      </svg>
      <svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-xuanzhuan"></use>
      </svg>
    </div>
    <div class="center">
      <input type="range" class="range" min="0" :max="duration" v-model="currentTime" step="0.05">
    </div>
    <div class="footer">
      <svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-24gl-repeat2"></use>
      </svg>
      <svg class="icon" aria-hidden="true" @click="goPlay(-1)">
        <use xlink:href="#icon-shangyishoushangyige" ></use>
      </svg>
      <svg class="icon bofang" aria-hidden="true" v-if="isBtn" @click="play">
            <use xlink:href="#icon-24gl-playCircle"  ></use>
          </svg>
          <svg class="icon bofang" aria-hidden="true" v-else="isBtn" @click="play" >
            <use xlink:href="#icon-zanting" ></use>
          </svg>
      <svg class="icon" aria-hidden="true" @click="goPlay(1)">
        <use xlink:href="#icon-xiayigexiayishou" ></use>
      </svg>
      <svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-list"></use>
      </svg>
    </div>
   </div>
</template>

<script>
    import {mapMutations,mapState} from 'vuex'
    export default {
  
       data(){
        return{
          isLyricShow:false
        }
       },
       computed:{
        ...mapState(['lyricList','currentTime','playListIndex','duration']),
        lyric: function () {
      let arr;
      if (this.lyricList.lyric) {
        arr = this.lyricList.lyric.split(/[(\r\n)\r\n]+/).map((item, i) => {
          let min = item.slice(1, 3);
          let sec = item.slice(4, 6);
          let mill = item.slice(7, 10);
          let lrc = item.slice(11, item.length);
          let time =
            parseInt(min) * 60 * 1000 + parseInt(sec) * 1000 + parseInt(mill);
          if (isNaN(Number(mill))) {
            mill = item.slice(7, 9);
            lrc = item.slice(10, item.length);
            time =
              parseInt(min) * 60 * 1000 + parseInt(sec) * 1000 + parseInt(mill);
          }
          console.log(min,sec,Number(mill),lrc);
          return { min, sec, mill, lrc, time };
        });
        arr.forEach((item, i) => {
          if (i === arr.length - 1 || isNaN(arr[i + 1].time)) {
            item.pre = 100000;
          } else {
            item.pre = arr[i + 1].time;
          }
        });
      }
      console.log(arr);
      return arr;
    },

       },
       watch:{
        currentTime:function(newValue){
          let p=document.querySelector('p.active')
          
          if(p&&p.offsetTop>250){
            console.log(this.$refs.musicLyric.scrollTop,'2');
            this.$refs.musicLyric.scrollTop=p.offsetTop-250
          }
          if(newValue===this.duration){
          this.updateIndex(this.playListIndex+1)

          }

        }
       },
       mounted(){
        //  console.log(this.lyricList.lyric);
        this.addDuration()
       },
        props:['musicList','play','isBtn','addDuration'],
        methods:{
          backHome(){
            this.isLyricShow=false
            this.updateDetailShow()
          },
          goPlay(num){
            let index= this.playListIndex+num
            if(index<0){
    index=this.musicList.length-1
            }else if(index==this.musicList.length){
        index=0
            }
            this.updateIndex(index)
          },
          ...mapMutations(['updateDetailShow','updateIndex'])
        }
    }
</script>

<style lang="less" scoped>
.bg-img{
  width: 100%;
  height: 100%;
  position: absolute;
  filter: blur(70px);
  z-index:-1
}
.musicDetailTop {
  width: 100%;
  height: 1rem;
  display: flex;
  padding: 0.2rem;
  justify-content: space-between;
  align-items: center;
  fill: #fff;
  .left {
    display: flex;
    align-items: center;
    .leftMarquee {
      width: 3rem;
      height: 100%;
      margin-left: 0.4rem;
      span {
        color: #999;
      }
      .icon {
        width: 0.3rem;
        height: 0.3rem;
        fill: #999;
      }
    }
  }
}
.musicMiddle{
  width: 100%;
  height: 9rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  .bg-needle{
    width: 2rem;
    height: 3rem;
    position: absolute;
    left: 46%;
    transform-origin: 0 0;
    transform: rotate(-13deg);
    transition: all 2s;
  }
  .bg_needle_active{
    width: 2rem;
    height: 3rem;
    position: absolute;
    left: 46%;
    transform-origin: 0 0;
    transform: rotate(0deg);
    transition: all 2s;
  }
  .bg-cd{
    width: 5rem;
    height: 5rem;
    position: absolute;
    bottom: 2.3rem;
    z-index: -1;
  }
  .bg-al{
    width: 3.2rem;
    height: 3.2rem;
    border-radius: 50%;
    position: absolute;
    bottom: 3.14rem;
    animation: rotate_ar 10s linear infinite;
  }
  .bg_al_active{
animation-play-state: running;
  }
  .bg_al_pause{
animation-play-state: paused;
  }
  @keyframes rotate_ar {
    0%{
      transform: rotateZ('0');
    }
    100%{
      transform: rotateZ('360');
    }
  }
}
.lyricContent{
  width: 100%;
  height: 8rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 0.2rem;
  overflow: scroll;
  p {
    color: rgb(190, 181, 181);
    margin-bottom: 0.3rem;
  }
  .active{
    color: #fff;
    font-size: 20px;
  }
}
.musicFooter{
  width: 99%;
  height: 3rem;
  position: absolute;
  bottom: 0.2rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  .top{
    width: 99%;
    height: 1rem;
    display: flex;
    justify-content: space-around;
    align-items: center;
   
  }

    .range {
    width: 100%;
    height: 0.06rem;
  }
  
  .footer{
    width: 99%;
    height: 1rem;
    display: flex;
    justify-content: space-around;
    align-items: center;
  }
}
</style>